<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport"
        content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0" />
    <meta name="keywords" content="HTML,CSS,HTML5,CSS3,ES6,JavaScript,Vue,Vue.js,TS,TypeScript,webpack,前端,全栈,Web开发" />
    <meta name="description" content="一位Web开发工程师的学习、工作笔记-星之痕。
    内容涵盖：HTML,CSS,HTML5,CSS3,ES6,JavaScript,Vue,Vue.js,TS,TypeScript,前端,全栈,Web开发……等" />
    <title>web开发笔记-星之痕</title>
    <style type="text/css">
        /*初始化CSS！*/
        body,
        div,
        span,
        h1,
        h2,
        h3,
        h4,
        h5,
        h6,
        p,
        ul,
        li,
        ol,
        dl,
        dt,
        dd,
        a,
        img,
        input {
            margin: 0;
            padding: 0;
            list-style: none;
            text-align: center;
        }

        /*初写正文样式！*/
        body {
            color: #333;
            font: 14px '微软雅黑';
            background-color: #fdfcf8;
            line-height: 1.5;
        }

        /*初写超链接样式！*/
        a {
            color: #338de6;
            text-decoration: none;
        }

        .icpWrap {
            position: fixed;
            width: 100%;
            color: gray;
            font-size: 12px;
            bottom: 0;
            text-align: center;
        }

        .icpWrap a {
            color: gray;
        }

        #app ul {
            margin: 18px auto;
        }

        /* #app ul li{
            text-align: left;
            margin-left:42%;
        } */

        /* 手机样式 */
        @media screen and (max-width:640) {
            body {
                background: lightblue;
            }
        }

        /* 平板样式 */
        @media screen and (min-width:641px) and (max-width:1200px) {
            body {
                background: lightblue;
            }
        }

        /* 大屏样式 */
        @media screen and (min-width:1201px) {
            body {
                background: lightblue;
            }
        }
    </style>
</head>

<body>
    <div id="app">

        <div>
            <h1>星之痕</h1>
            <ul>
                <li><a href="./vuejs-demo/vue index.html">Vue的使用</a></li>
                <li><a href="http://www.xingzhihen.com" target="_blank">supermall</a></li>
            </ul>
        </div>

        <div class="icpWrap">
            互联网ICP备案：<a href="https://beian.miit.gov.cn" target="_blank">粤ICP备19077666号</a>
        </div>
    </div>

</body>

</html>